/*
 * @Description: 更多商品
 * @Author: kanglin
 * @Date: 2018-12-25 14:26:33
 * @Copyright: Created by Panxsoft.
 */

<style lang="less" scoped rel="stylesheet/less" type="text/less" >
	@import '~src/assets/css/common.less';
    .v-com-more{
		.header{
			position: fixed;
			width: 100%;
			z-index: 999;
		}
        .body{
			background-color: #F9F9F9;
			padding-top: 96*@rem-per-px;
			.poducts{
				display: flex;
				justify-content: center;
				flex-wrap: wrap;
				.product-item{
					// display: inline-block;
					margin: 4*@rem-per-px 4*@rem-per-px;
				}
			}
			.odd:after {
				content: "";
				flex: auto;
			}
		}
    }
</style>

<template>
	<div class="v-com-more">
		<div class="header">
			<page-header
				:title="title"
				@back="backToHome"/>
		</div>
		<div class="body">
			<ul
				:class="{ odd :products.length%2}"
				class="poducts">
				<li
					v-for="item in products"
					:key="item.product_id"
					class="product-item">
					<more-product-card
						:src="item.image"
						:title="item.name"
						:price="item.currency_settle_price || item.price"
						:left-symbol="item.symbol_left"
						:right-symbol="item.symbol_right"
						@click.native="handleApp('productDetail', JSON.stringify({id: item.product_id}))"
					/>
				</li>
			</ul>
		</div>
		<infinite-loading
			:distance="500"
			@infinite="infiniteHandler">
			<div slot="spinner"/>
			<div
				slot="no-more"
				class="no-more">{{ $t('common.no_more_data') }}</div>
		</infinite-loading>
	</div>
</template>

<script>

import { mapMutations } from 'vuex';
import moreProductCard from 'src/views/component/more-product-card';
import header from 'src/views/component/header';
import { APP_PRODUCT } from 'src/API_LIST';
import { appHandle } from 'src/views/mixins/appHandle';

/**
 * 更多商品（商品专区）
 * @vue-data {array} products - 商品数组
 * @vue-data {Object} params - 分页参数对象
 * @vue-data {number} [params.per_page=10] - 每页显示数
 * @vue-data {number} [params.page=10] - 当前页码
 * @vue-data {null} [params.search_type=null] - 搜索类型
 * @vue-data {number} [params.layout_module_id=null] - 模块id
 * @vue-data {string} title - 标题
 */
export default {
	name: 'More',
	components: {
		'page-header': header,
		moreProductCard,
	},
	mixins: [appHandle],
	data() {
		return {
			products: [],
			params: {
				per_page: 10,
				page: 1,
				search_type: null,
				layout_module_id: null,
				language: this.$url.language || this.$url.lang,
				theme_name: '',
			},
			title: '',
		};
	},
	created() {
		this.parseAndStoreUrlParams(this.$route);
		this.setThemeName(this.theme_name);
	},
	methods: {

		...mapMutations(['setThemeName']),

		/**
         * 处理返回事件
         */
		backToHome() {
			this.handleApp('back');
		},

		/**
         * 解析url参数
         * @param {Object} route
         * @return {object} params
         */
		parseAndStoreUrlParams(route) {
			const {
				search_type, layout_module_id, theme, module_id,
			} = route.query;
			if (this.validateParams(search_type, layout_module_id, module_id)) {
				this.params.search_type = search_type;
				this.params.layout_module_id = layout_module_id || null;
				this.params.module_id = module_id || null;
				this.params.currency = this.$url.currency;
				this.params.language = this.$url.language || this.$url.lang;
				this.params.store_id = this.$url.store_id;
				this.theme_name = theme;
				this.title = this.$t(`more.${search_type}`);
			} else {
				const toast = this.$createToast({
					type: 'error',
					time: 2000,
					txt: this.$t('common.error_params'),
				});
				toast.show();
				window.setTimeout(this.backToHome, 2000);
			}
		},

		/**
		 * 校验参数
		 */
		validateParams(search_type, layout_module_id, module_id) {
			return search_type && (layout_module_id || module_id);
		},

		/**
         * 请求更多商品
         * @param {object} params 请求更多商品的参数对象
         */
		fetchMoreProducts(params) {
			return this.$http(APP_PRODUCT, { params })
				.then(({ data }) => {
					if (data.code !== 0) {
						throw new Error(data.error);
					}
					return data;
				})
				.catch((error) => {
					const toast = this.$createToast({
						type: 'error',
						time: 2000,
						txt: error.message,
					});
					toast.show();
				});
		},

		/**
		 * 上拉加载的处理函数
		 * @param  {Object} $state {状态管理对象，内置加载完成，调用加载函数}
		 */
		infiniteHandler($state) {
			this.fetchMoreProducts(this.params)
				.then((data) => {
					if (data.products.current_page > data.products.last_page) {
						$state.complete();
					} else {
						this.products.push(...data.products.data);
						const page = data.products.current_page + 1;
						this.params.page = page;
						$state.loaded();
					}
				});
		},
	},
};
</script>
